<template>
  <div class="cms-views-container bg-[#f8f8f8] system-setting-pages">
    <header class="h-10 leading-10 px-4 text-center w-full bg-white">
      <span class="float-left">
        <LeftOutlined class="text-base" />
      </span>
      <span class="text-base text-[#333] font-medium">系统设置</span>
    </header>
    <div class="mx-4 pt-4">
      <div class="bg-white setting-item">
        <p class="setting-border">
          <span class="text-[#333] text-base">个人资料</span>
          <span class="text-[#c2c2c2] text-sm"
            >大大马里奥
            <img :src="mineIcons.list_rigth_arrow" alt="" class="w-5 h-5" />
          </span>
        </p>
        <p>
          <span class="text-[#333] text-base">修改密码</span>
          <img :src="mineIcons.list_rigth_arrow" alt="" class="w-5 h-5" />
        </p>
      </div>
      <div class="bg-white setting-item mt-[10px]">
        <p>
          <span class="text-[#333] text-base">清除系统缓存</span>
          <span class="text-[#c2c2c2] text-sm"
            >18.52MB
            <img :src="mineIcons.list_rigth_arrow" alt="" class="w-5 h-5" />
          </span>
        </p>
      </div>
      <div class="bg-white setting-item mt-[10px]">
        <p>
          <span class="text-[#333] text-base">检查更新</span>
          <span class="text-[#c2c2c2] text-sm"
            >当前版本v1.0.0
            <img :src="mineIcons.list_rigth_arrow" alt="" class="w-5 h-5" />
          </span>
        </p>
      </div>
      <button class="mt-4 w-full h-14 rounded-lg border-0 bg-white text-base text-[#333]">退出登录</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import mineIcons from '../assets/mine'
</script>

<style scoped lang="less">
.system-setting-pages {
  .setting-item {
    p {
      @apply h-14 flex items-center justify-between mx-4 rounded-2xl;
    }
    .setting-border {
      border-bottom: 1px solid #f1f3f7;
    }
  }
}
</style>
